<template>
  <div class="storeInfo">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="店铺标志" name="1">
        <el-image
          style="width: 150px; height: 150px"
          :src="this.formData.mallInfoRequest.image"
          :preview-src-list="srcList1"
        >
          <div slot="error" class="image-slot">
            <i>暂无图片</i>
          </div>
        </el-image>
      </el-collapse-item>
      <el-collapse-item title="基本信息" name="2">
        <div class="form">
          <el-form
            ref="form"
            label-position="right"
            label-width="100px"
            :model="formData"
          >
            <el-form-item label="店铺名称:">
              <el-input
                style="width: 260px"
                v-model="formData.mallInfoRequest.mallName"
                placeholder="店铺名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="店主姓名:">
              <el-input
                style="width: 260px"
                v-model="formData.mallInfoRequest.shopkeeper"
                placeholder="店主姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" prop="phone">
              <el-input
                v-model="formData.mallInfoRequest.phone"
                style="width: 260px"
                placeholder="请输入电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="负责人生日:" prop="birthday">
              <el-date-picker
                style="width: 260px"
                v-model="formData.mallInfoRequest.birthday"
                type="date"
                placeholder="选择生日时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="性别:" prop="gender">
              <!--性别-->
              <el-radio-group v-model="formData.mallInfoRequest.gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="结算周期" prop="settlementCycle">
              <el-select
                v-model="formData.mallInfoRequest.billingPeriod"
                style="width: 260px"
              >
                <el-option label="周结" value="1"></el-option>
                <el-option label="半月结" value="2"></el-option>
                <el-option label="月结" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="店铺标签" prop="storeLabel">
              <!-- 选择框-->
              <el-select
                v-model="formData.mallInfoRequest.tag"
                style="width: 260px"
                placeholder="请选择店铺标签"
              >
                <el-option label="美食" value="1"></el-option>
                <el-option label="服饰" value="2"></el-option>
                <el-option label="数码" value="3"></el-option>
                <el-option label="家居" value="4"></el-option>
                <el-option label="美妆" value="5"></el-option>
                <el-option label="母婴" value="6"></el-option>
                <el-option label="运动" value="7"></el-option>
                <el-option label="其他" value="8"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品分类:">
              <el-input
                style="width: 260px"
                v-model="formData.mallInfoRequest.categoryName"
                placeholder="商品分类"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="税务登记号:"
              v-if="formData.mallInfoRequest.type === 2"
            >
              <el-input
                style="width: 260px"
                v-model="formData.mallInfoRequest.tax"
                placeholder="请输入税务登记号"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- /.form -->
      </el-collapse-item>
      <el-collapse-item title="寄件人地址" name="3">
        <div class="form">
          <el-form
            ref="form"
            :inline="true"
            label-position="right"
            label-width="100px"
            :model="formData"
          >
            <el-form-item label="省份:" prop="province">
              <el-select
                v-model="formData.adressRequest.provice"
                style="width: 260px"
                placeholder="请选择省份"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市:" prop="city">
              <el-select
                v-model="formData.adressRequest.city"
                style="width: 260px"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区县:" prop="county">
              <el-select
                v-model="formData.adressRequest.county"
                style="width: 260px"
              >
                <el-option
                  v-for="item in countyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址:" prop="address">
              <el-input
                type="textarea"
                v-model="formData.adressRequest.details"
                style="width: 636px"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮政编码:" prop="postalCode">
              <el-input
                v-model="formData.adressRequest.zipCode"
                style="width: 260px"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item title="收件人地址" name="4">
        <div class="form">
          <el-form
            ref="form"
            :inline="true"
            label-position="right"
            label-width="100px"
            :model="formData"
          >
            <el-form-item label="省份:" prop="province">
              <el-select
                v-model="formData.receivingAddressRequest.provice"
                style="width: 260px"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市:" prop="city">
              <el-select
                v-model="formData.receivingAddressRequest.city"
                style="width: 260px"
                clearable
                placeholder="请选择城市"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区县:" prop="county">
              <el-select
                v-model="formData.receivingAddressRequest.county"
                style="width: 260px"
                clearable
                placeholder="请选择区县"
              >
                <el-option
                  v-for="item in countyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址:" prop="address">
              <el-input
                type="textarea"
                v-model="formData.receivingAddressRequest.details"
                style="width: 636px"
                placeholder="请输入详细地址"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="邮政编码:" prop="postalCode">
              <el-input
                v-model="formData.receivingAddressRequest.zipCode"
                style="width: 260px"
                clearable
                placeholder="请输入邮政编码"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item title="银行账户" name="5">
        <div class="form">
          <el-form
            ref="form"
            label-position="right"
            label-width="126px"
            :model="formData"
          >
            <el-form-item label="银行名称:" prop="bankName">
              <el-input
                v-model="formData.bankInfoRequest.bankName"
                style="width: 260px"
                clearable
                placeholder="银行名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="持卡人姓名:" prop="bankUserName">
              <el-input
                v-model="formData.bankInfoRequest.bankUserName"
                style="width: 260px"
                clearable
                placeholder="请输入持卡人姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="收款账号:" prop="bankNo">
              <el-input
                v-model="formData.bankInfoRequest.bankNo"
                style="width: 260px"
                clearable
                placeholder="请输入收款账号"
              ></el-input>
            </el-form-item>
            <el-form-item label="银行所在省份:" prop="bankAddress">
              <el-input
                v-model="formData.bankInfoRequest.bankAddress"
                style="width: 260px"
                clearable
                placeholder="请输入银行地址"
              ></el-input>
            </el-form-item>

            <el-form-item label="持卡人手机号:" prop="bankUserPhone">
              <el-input
                v-model="formData.bankInfoRequest.bankUserPhone"
                style="width: 260px"
                clearable
                placeholder="请输入持卡人手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="持卡人身份证号:" prop="bankUserCard">
              <el-input
                v-model="formData.bankInfoRequest.bankUserCard"
                style="width: 260px"
                clearable
                placeholder="请输入持卡人身份证号"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="转账方式">
              <el-radio-group v-model="formData.bankInfoRequest.payType">
                <el-radio label="1">对公账户</el-radio>
                <el-radio label="2">对私账户</el-radio>
              </el-radio-group>
            </el-form-item> -->
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="店铺状态"
        name="6"
        v-if="formData.mallInfoRequest.type === 2"
      >
        <div class="form">
          <el-form
            ref="form"
            label-position="right"
            label-width="126px"
            :model="formData"
          >
            <el-form-item label="公司名称:" prop="companyName">
              <el-input
                v-model="formData.userCompanyRequest.companyName"
                style="width: 260px"
                clearable
                placeholder="请输入公司名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="营业执照:" prop="businessLicense">
              <el-input
                v-model="formData.userCompanyRequest.businessLicense"
                style="width: 260px"
                clearable
                placeholder="请输入营业执照"
              ></el-input>
            </el-form-item>
            <el-form-item label="营业期限:" prop="businessTerm">
              <el-date-picker
                style="width: 260px"
                v-model="formData.userCompanyRequest.businessTermStart"
                type="date"
                placeholder="开始时间"
              >
              </el-date-picker>
              <el-date-picker
                style="width: 260px"
                v-model="formData.userCompanyRequest.businessTermEnd"
                type="date"
                placeholder="结束时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="公司电话:" prop="companyPhone">
              <el-input
                v-model="formData.userCompanyRequest.companyPhone"
                style="width: 260px"
                clearable
                placeholder="请输入公司电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司地址:" prop="companyAddress">
              <el-input
                v-model="formData.userCompanyRequest.companyAddress"
                style="width: 260px"
                clearable
                placeholder="请输入公司地址"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item title="必要证件" name="7">
        <div class="form">
          <el-form
            ref="form"
            label-position="right"
            label-width="126px"
            :model="formData"
          >
            <el-form-item label="身份证正面:" prop="idCardOne">
              <el-image
                style="width: 100px; height: 100px"
                :src="this.formData.imgRequest.idCardOne"
                :preview-src-list="srcList2"
              >
                <div slot="error" class="image-slot">
                  <i>暂无图片</i>
                </div>
              </el-image>
            </el-form-item>
            <el-form-item label="身份证反面:" prop="idCardTwo">
              <el-image
                style="width: 100px; height: 100px"
                :src="this.formData.imgRequest.idCardTwo"
                :preview-src-list="srcList3"
              >
                <div slot="error" class="image-slot">
                  <i>暂无图片</i>
                </div>
              </el-image>
            </el-form-item>
            <el-form-item label="手持身份证:" prop="idCardThr">
              <el-image
                style="width: 100px; height: 100px"
                :src="this.formData.imgRequest.idCardThr"
                :preview-src-list="srcList4"
              >
                <div slot="error" class="image-slot">
                  <i>暂无图片</i>
                </div>
              </el-image>
            </el-form-item>
            <el-form-item label="银行卡照片:" prop="bankImg">
              <el-image
                style="width: 100px; height: 100px"
                :src="this.formData.imgRequest.bankImg"
                :preview-src-list="srcList5"
              >
                <div slot="error" class="image-slot">
                  <i>暂无图片</i>
                </div>
              </el-image>
            </el-form-item>
            <el-form-item
              label="营业执照:"
              prop="businessLicense"
              v-if="formData.mallInfoRequest.type === 2"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="this.formData.imgRequest.businessLicense"
                :preview-src-list="srcList6"
              >
                <div slot="error" class="image-slot">
                  <i>暂无图片</i>
                </div>
              </el-image>
            </el-form-item>
            <el-form-item
              label="税务登记证 :"
              prop="taxRegistration"
              v-if="formData.mallInfoRequest.type === 2"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="this.formData.imgRequest.taxRegistration"
                :preview-src-list="srcList7"
              >
                <div slot="error" class="image-slot">
                  <i>暂无图片</i>
                </div>
              </el-image>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { cloud } from "@/framework/utils/request";
// import areaData from "./area.json";

export default {
  name: "StoreInformation",
  props: {
    currentRow: Object,
  },
  data() {
    return {
      allDisabled: false,
      activeNames: ["1", "2", "3", "4", "5", "6", "7"],
      uploadFileUrl: `${this.baseURL()}/sysFileInfo/upload?secretFlag=N&fileBucket=mall`,
      //   img: require("./avatar.png"),
      data: "",
      url: "",
      // 省份数据
      provinceList: [],
      // 城市数据
      cityList: [],
      // 区县数据
      countyList: [],
      srcList1: [],
      srcList2: [],
      srcList3: [],
      srcList4: [],
      srcList5: [],
      srcList6: [],
      srcList7: [],
      formData: {
        mallInfoRequest: {
          //maInfoReponse
          // 会员名
          account: "", //无
          // 店主姓名
          shopkeeper: "",
          phone: "",
          birthday: "",
          gender: 0,
          storeName: "", //无
          // 结算周期
          billingPeriod: "",
          // 店铺标签
          tag: "",
          // 商品分类
          goodsCategory: "",
          // 税务登记号:
          tax: "",
          image: "",
        },
        // 寄件人
        adressRequest: {
          //
          // 寄件人省份
          provice: "",
          // 城市
          city: "",
          // 区县
          county: "",
          // 详细地址
          details: "",
          // 邮政编码
          zipCode: "",
        },
        // 收件人
        receivingAddressRequest: {
          provice: "",
          // 城市
          city: "",
          // 区县
          county: "",
          // 详细地址
          details: "",
          // 邮政编码
          zipCode: "",
        },
        // 银行
        bankInfoRequest: {
          // mallBankInfoResponse
          bankName: "",
          bankUserName: "",
          bankNo: "",
          bankAddress: "",
          bankUserPhone: "",
          bankUserCard: "",
          payType: "1",
        },
        // 店铺状态
        userCompanyRequest: {
          companyName: "",
          businessLicense: "",
          businessTermStart: "",
          businessTermEnd: "",
          companyPhone: "",
          companyAddress: "",
        },
        imgRequest: {
          // infoImgResponse
          idCardOne: "",
          idCardTwo: "",
          idCardThr: "",
          bankImg: "",
          businessLicense: "",
          taxRegistration: "",
        },
      },
    };
  },
  created() {
    // this.currentRow.mallInfoRequest.gender = 1;
    for (let key in this.currentRow) {
      if (this.currentRow[key] !== null) {
        // 检查值是否为 null
        if (typeof this.currentRow[key] === "object") {
          // 如果属性值是对象，则递归处理
          this.formData[key] = {};
          for (let nestedKey in this.currentRow[key]) {
            if (this.currentRow[key][nestedKey] !== null) {
              this.formData[key][nestedKey] = this.currentRow[key][nestedKey];
            }
          }
        } else {
          // 否则直接赋值
          this.formData[key] = this.currentRow[key];
        }
      }
    }
    // this.formData = this.currentRow;
  },
  mounted() {
    this.srcList1 = [this.formData.mallInfoRequest.image];
    this.srcList2 = [this.formData.imgRequest.idCardOne];
    this.srcList3 = [this.formData.imgRequest.idCardTwo];
    this.srcList4 = [this.formData.imgRequest.idCardThr];
    this.srcList5 = [this.formData.imgRequest.bankImg];
    this.srcList6 = [this.formData.imgRequest.businessLicense];
    this.srcList7 = [this.formData.imgRequest.taxRegistration];
  },
  methods: {
    baseURL() {
      return process.env.VUE_APP_BASE_API + cloud.file;
    },
    handleRemove(file, fileList) {},
    handleAvatarSuccess(res, file, fileList) {
      this.url = URL.createObjectURL(file.raw);
    },
    handleClearProvince() {
      this.cityList = [];
      this.countyList = [];
      this.formData.city = "";
      this.formData.county = "";
    },
    handleClearCity() {
      this.countyList = [];
      this.formData.county = "";
    },
  },
};
</script>

<style scoped lang="scss">
.storeInfo {
  width: 98%;
  min-height: 750px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  background-color: #fff;
  overflow: hidden;
  padding: 0 20px;

  .form {
    margin-left: 80px;
  }
}
</style>
